// 监控点位
<template>
  <div class="big_box" :style="{ minHeight: transferHeight + 'px' }" id="userBigZH">
    <el-tabs class="scorllFixed" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane :label="item.name" :name="item.path" v-for="item in jurisdiction" :key="item.name">
        <router-view v-if="activeName === item.path"></router-view>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import { setUrl } from '@/utils/getUrl.js'
import { getAuthority } from '@/assets/js/getAuthority.js'
export default {
  data() {
    return {
      activeName: 'hostviewList',
      jurisdiction: [],
    }
  },
  computed: {
    transferHeight() {
      // 计算屏幕滚动高度 - nav - 导航栏
      return window.innerHeight - 70
    },
  },
  watch: {
    jurisdiction: {
      deep: true,
      handler(newVal, oldVal) {
        // console.log(newVal, oldVal)
        this.jurisdiction = newVal // 保存列表
        this.activeName = this.$route.name
        this.$router.push(this.$route.path)
      },
    },
    // 监听url中的hash值的变化
    $route(to, from) {
      const hashUrl = window.location.hash.substr(2)
      if (hashUrl.startsWith('hostviewList')) {
        this.activeName = 'hostviewList'
      }
    },
  },
  created() {
    getAuthority(this, 'hostViewKey') // 获取权限
  },
  mounted() {},
  updated() {},
  destroyed() {
    // 默认
    setUrl('hostViewKey', '')
  },
  methods: {
    // 刷新右侧需要调用的函数
    getChildRefresh() {
      getAuthority(this, 'hostViewKey') // 获取权限
    },
    handleClick(tab, event) {
      setUrl('hostViewKey', tab.name)
      if (tab.name === 'hostviewList') {
        this.$router.push('/hostviewList')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.big_box {
  background-color: #f2f2f2;
  // width: 101.5%;
  width: 100%;
  // position: relative;
  // left: -12px;
  // padding: 0 15px;
}
</style>
